import React, {Component, Fragment} from 'react'
import {List, message, Avatar, Spin} from 'antd'
import emitter from "../helper/ev"
// import reqwest from 'reqwest';
import "../style/index.scss"
import InfiniteScroll from 'react-infinite-scroller';
import { Link } from 'react-router-dom';

// const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';

class UserList extends Component {
    constructor(props){
        super(props)
        this.state = {
            data:[],
            loading: false,
            hasMore: true,
        };
    }

    componentDidMount(){
         emitter.addListener("callMe",(msg)=>{
                // console.log(msg)
                this.setState({
                    data:msg
                })
        })
    }
    
    // fetchData = callback => {
    //     reqwest({
    //     url: fakeDataUrl,
    //     type: 'json',
    //     method: 'get',
    //     contentType: 'application/json',
    //     success: res => {
    //         callback(res);
    //     },
    //     });
    // };

    handleInfiniteOnLoad = () => {
        let { data } = this.state;
        this.setState({
          loading: true,
        });
        if (data.length > 14) {
          message.warning('Infinite List loaded all');
          this.setState({
            hasMore: false,
            loading: false,
          });
          return;
        }
        // this.fetchData(res => {
        //   data = data.concat(res.results);
        //   this.setState({
        //     data,
        //     loading: false,
        //   });
        // });
      };

    render(){
        return (
            <Fragment>
                <div className="demo-infinite-container">
                    <InfiniteScroll
                    initialLoad={false}
                    pageStart={0}
                    loadMore={this.handleInfiniteOnLoad}
                    hasMore={!this.state.loading && this.state.hasMore}
                    useWindow={false}
                    >
                    <List
                        dataSource={this.state.data}
                        renderItem={item => (
                        <List.Item key={item.id}>
                            <List.Item.Meta
                            avatar={
                                <Avatar src={item.avatar} />
                            }
                            title={<Link to={item.url}>{item.username}</Link>}
                            description={item.desc}
                            />
                        </List.Item>
                        )}
                    >
                        {this.state.loading && this.state.hasMore && (
                        <div className="demo-loading-container">
                            <Spin />
                        </div>
                        )}
                    </List>
                    </InfiniteScroll>
                </div>
            </Fragment>
        )
    }
}

export default UserList 